<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <script src="../module/ydui/ydui.flexible.min.js"></script>
    <link href="../module/ydui/ydui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../module/swiper/swiper-3.4.1.min.css">
    <link rel="stylesheet" href="../css/goodsdetail.css">
</head>
<body>
<section class="g-container">
    <div class="header">
        <span class="btn-goback"></span>
        <span>商品</span>
    </div>
    <div class="content-wrap">
        <div class="cnt-box">
            <div class="goods-un-invalid">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiperBgImgcover"
                             style="background-image: url(../img/default.png)"></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="goods-title">2015春夏款真丝印花吊带裙</div>
                <div class="goods-price">￥60.00<span>￥158.00</span></div>
                <div class="goods-info">西太后的设计仿佛有一种魔性的张力，离经叛道却又浪漫不 减！朋克教母Vivienne Westwood和她的同名品牌绝对是
                    英国时尚界的一个传奇，她的独特设计总能引爆潮流。春秋 季总少不了一条丝巾，不仅保暖时髦度更是大大增加。
                </div>
                <div class="placeholder"></div>
                <div class="goods-color-box">
                    <div class="item-title">颜色</div>
                    <ul class="goods-color-ul">
                        <li class="current">蓝色</li>
                        <li>蓝色蓝色</li>
                        <li>蓝色</li>
                        <li>蓝色</li>
                    </ul>
                </div>
                <div class="goods-size-box">
                    <div class="item-title">尺码</div>
                    <ul class="goods-size-ul">
                        <li class="current">XS</li>
                        <li>S</li>
                        <li>M</li>
                        <li class="stockout">M缺货</li>
                    </ul>
                </div>
                <div class="goods-amount-box">
                    购买数量
                    <span class="m-spinner" id="J_Quantity">
                    <a href="javascript:;" class="J_Del"></a>
                    <input type="text" class="J_Input" placeholder="">
                    <a href="javascript:;" class="J_Add"></a>
                </span>
                </div>
                <div class="placeholder"></div>
                <ul class="sf-slt-type-box">
                    <li class="type-item ">商品详情</li>
                    <li class="type-item ">商品评价</li>
                    <li class="type-item current">规格参数</li>
                </ul>
                <div class="cnt-detail-info">
                    <div class="item-gds-detail">
                        <img src="../img/default.png"/>
                        <img src="../img/default.png"/>
                        <img src="../img/default.png"/>
                    </div>
                    <div class="item-gds-assess ">
                        <div class="assess-item">
                            <div class="ases-face" style="background-image: url(../img/default.png)"></div>
                            <div class="ases-name">Dolores</div>
                            <div class="ases-info">
                                <span class="ases-status good">好评</span><!--good bad middling-->
                                <span class="buy-goods-info">颜色:白色/尺码:XL/2017-09-05</span>
                            </div>
                            <div class="ases-cnt">还是挺好看的~还是挺好看的~还是挺好看的~还是挺好看的~还是挺好看的~还是挺好看的~</div>
                            <div class="ases-imgs">
                                <div class="ases-imgs-item" style="background-image: url(../img/default.png)"></div>
                                <div class="ases-imgs-item" style="background-image: url(../img/default.png)"></div>
                                <div class="ases-imgs-item" style="background-image: url(../img/default.png)"></div>
                            </div>
                        </div>
                        <div class="assess-item">
                            <div class="ases-face" style="background-image: url(../img/default.png)"></div>
                            <div class="ases-name">Dolores</div>
                            <div class="ases-info">
                                <span class="ases-status good">好评</span><!--good bad middling-->
                                <span class="buy-goods-info">颜色:白色/尺码:XL/2017-09-05</span>
                            </div>
                            <div class="ases-cnt">还是挺好看的~还是挺好看的~还是挺好看的~还是挺好看的~还是挺好看的~还是挺好看的~</div>
                            <div class="ases-imgs">
                                <div class="ases-imgs-item" style="background-image: url(../img/default.png)"></div>
                                <div class="ases-imgs-item" style="background-image: url(../img/default.png)"></div>
                                <div class="ases-imgs-item" style="background-image: url(../img/default.png)"></div>
                            </div>
                        </div>
                    </div>
                    <div class="item-gds-params current">
                        <table>
                            <tr>
                                <td>廓形</td>
                                <td>A型</td>
                            </tr>
                            <tr>
                                <td>版型</td>
                                <td>休闲欧版</td>
                            </tr>
                            <tr>
                                <td>风格</td>
                                <td>通勤</td>
                            </tr>
                            <tr>
                                <td>组合形式</td>
                                <td>单件</td>
                            </tr>
                            <tr>
                                <td>裙长</td>
                                <td>中长裙</td>
                            </tr>
                            <tr>
                                <td>袖长</td>
                                <td>长袖</td>
                            </tr>
                            <tr>
                                <td>领型</td>
                                <td>立领</td>
                            </tr>
                            <tr>
                                <td>袖型</td>
                                <td>常规</td>
                            </tr>
                            <tr>
                                <td>腰型</td>
                                <td>中腰</td>
                            </tr>
                            <tr>
                                <td>衣门襟</td>
                                <td>套头</td>
                            </tr>
                            <tr>
                                <td>裙型</td>
                                <td>A字裙</td>
                            </tr>
                            <tr>
                                <td>图案</td>
                                <td>格子</td>
                            </tr>
                            <tr>
                                <td>流行元素/工艺</td>
                                <td>口袋 纽扣</td>
                            </tr>
                            <tr>
                                <td>年份季节</td>
                                <td>2016年夏季</td>
                            </tr>
                            <tr>
                                <td>颜色分类</td>
                                <td>灰色系</td>
                            </tr>
                            <tr>
                                <td>重量</td>
                                <td>0.1kg</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="goods-is-invalid">很抱歉，您查看的商品已失效！</div>
        </div>
    </div>
    <div class="footer btn-submit">立即购买</div>
</section>
</body>
<script src="../module/jquery/2.1.4/jquery.min.js"></script>
<script src="../module/swiper/swiper-3.4.1.jquery.min.js"></script>
<script src="../module/ydui/ydui.min.js"></script>
<script>
    //resizeCntHeight
    resizeCntHeight();
    $(window).resize(function () {
        resizeCntHeight();
    });
    function resizeCntHeight() {
        $('.content-wrap').css({height: $('body').height() - $('.header').height() - $('.footer').height() + 'px'});
    }
</script>
<script>
    new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        autoplay: 2000,
        onlyExternal: false,
        autoplayDisableOnInteraction: false,
        paginationClickable: true,
        pagination: '.swiper-pagination',
        paginationType: 'bullets'
    });

    //data-ydui-spinner="{input: '.J_Input', add: '.J_Add', minus: '.J_Del',longpress: false, min: 1,max:10, unit: 1}"
    $('#J_Quantity').spinner({
        input: '.J_Input',
        add: '.J_Add',
        minus: '.J_Del',
        unit: 1,
        min: 1,
        max: 10,
        callback: function (value, $ele) {
            // $ele 当前文本框[jQuery对象]
            // $ele.css('background', '#FF5E53');
            console.log('值：' + value);
        }
    });
</script>
</html>